<template>
  <div>
    <div class="collection-container">
      <router-link to="/" class="collection-card">
        <div class="blog-title">文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题文章标题</div>
        <div class="blog-type">分类：<a-tag color="green">前端</a-tag></div>
        <div class="blog-bottom">
          <div class="blog-time">2019-12-25 17:54:15</div>
          <div class="blog-meta">
            <a-icon type="eye" /> 0
            <a-icon type="heart" /> 0
            <a-icon type="like" /> 0
            <a-icon type="message" /> 0
          </div>
        </div>
      </router-link>
      <a-divider />
    </div>
    <div class="blog-pagination">
      <a-pagination :show-total="total => `共 ${total} 条`" show-quick-jumper :default-current="1" :total="500" @change="pageChange" />
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    pageChange(pageNumber) {
      console.log('Page: ', pageNumber)
    }
  }
}
</script>
<style scoped>
a {
  display: flex;
  flex-direction: column;
  color: #3e4149;
  width: 560px;
}

a:hover {
  color: #3e4149;
}

.blog-title {
  font-size: 16px;
  line-height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.blog-type {
  line-height: 40px;
}

.blog-bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  font-size: 12px;
  color: #b8b8b8;
}

</style>
